<template>
  <div>
      <!-- 控制弹窗 -->
      <button @click="newGoods">新增商品</button>
      <!-- 购物车的主页面 -->
      <Info
        ref="info"
        :info="info"
        @close="close"
        @add="addGoods"
        @edit1="editItem"
      ></Info>
      <List
        ref="list"
        :list="list"
        @del="delGoods"
        @edit="editGoods"
      ></List>
  </div>
</template>

<script>
import List from './CartList.vue'
import Info from './CartInfo.vue'
export default {

  created() {
    // 获取当前页面的路由信息
    console.log(this.$route);
    console.log(this.$router);
  },
    components: {
        Info,
        List
    },
    data() {
        return {
            list: [
                {name: 'apple', price: 3, num: 3},
                {name: 'banana', price: 2, num: 4},
                {name: 'orange', price: 4, num: 7},
            ],
            info: {
                // 用来控制弹窗中显示的内容
                type: '1', // 1修改 2新增
                isShow: false
            },
            // 当前修改的商品
            changeIndex: 0
        }
    },
    methods: {
        close() {
            this.info.isShow = false;
        },
        addGoods(val) {
            // 新增商品
            this.list.push(val)
        },
        delGoods(val) {
            // 删除商品
            this.list.splice(val, 1)
        },
        editItem(val) {
            this.list.splice(this.changeIndex, 1, val)
        },
        editGoods(index) {
            this.changeIndex = index;
            this.info = {
                type: '1', // 1修改 2新增
                isShow: true
            };
            // 向弹窗中传值--调用子组件的方法，编辑传已有的值
            this.$refs.info.setVal(this.list[index])
        },
        // 新增商品
        newGoods() {
            // $refs 作用是选择元素然后操作它，可以获取他的数据也可以调用他的方法
            // console.log(this.$refs.list);
            // console.log(this.$refs.info);
            this.info = {
                type: '2', // 1修改 2新增
                isShow: true
            };
            // 向弹窗中传值--调用子组件的方法,新增传空值
            this.$refs.info.setVal({
                name: '',
                num: '',
                price: ''
            })
        }
    }
}
</script>

<style>

</style>